<template>
  <div>
    <p>移除对象</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
nextTick(() => {
  let Dom = document.querySelector(".three_box");
  let width = Dom.offsetWidth;
  let height = Dom.offsetHeight;
  // 场景
  const scene = new THREE.Scene();
  // 坐标系
  let xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  //   几何
  let geometry = new THREE.BoxGeometry(50, 50, 50);
  //   材质
  let material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.8,
    side:THREE.DoubleSide
  });
  //   模型对象
  let mesh = new THREE.Mesh(geometry, material);
  let group = new THREE.Group();
  group.add(mesh);
  mesh.position.set(50, 0, 0);
  group.position.set(50, 50, 50);
  scene.add(group);
  //   光源
  let pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(200, 200, 200);
  pointLight.lookAt(mesh.position);
  scene.add(pointLight);

  let amlight = new THREE.AmbientLight(0xffffff);
  scene.add(amlight);

  let dirLight = new THREE.DirectionalLight(0xffffff, 1);
  dirLight.position.set(200, 200, 200);
  dirLight.lookAt(mesh.position);
  scene.add(dirLight);
  //   相机
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 30000);
  camera.position.set(300, 400, 0);
  camera.lookAt(mesh.position);
  // 渲染器
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(width, height);
  Dom.appendChild(renderer.domElement);
    scene.remove(amlight)
    // scene.remove(dirLight)
//   scene.remove(group);
  renderer.render(scene, camera);

  //   相机控件
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
});
</script>

<style  scoped>
.three_box {
  width: 70vw;
  height: 60vh;
}
</style>